<template>
  <a-spin :spinning="loading">
    <a-modal
      width="800px"
      v-model="visible"
      title="菜单详情"
      @cancel="handleClose"
      @ok="submit"
      ok-text="确认"
      cancel-text="取消"
    >
      <div class="model-box">
        <div class="menu-list__content">
          <div class="menu-list">
            <div class="menu-item" v-for="menu in menuList" :key="menu.id">
              <span>
                {{ menu.name }}
              </span>
              <a-icon
                @click="addMenu(menu)"
                style="cursor:pointer;margin-left:20px"
                type="plus-circle"
                theme="twoTone"
              />
            </div>
          </div>
        </div>
        <div class="model-tree">
          <a-tree
            class="draggable-tree"
            :default-expanded-keys="expandedKeys"
            draggable
            :replace-fields="replaceFields"
            :tree-data="treeData"
            @dragenter="onDragEnter"
            @drop="onDrop"
          />
        </div>
      </div>
    </a-modal>
  </a-spin>
</template>
<script>
// import { formatArr2Tree } from "@/utils/tools";
export default {
  props: {
    modelVisible: {
      type: Boolean,
      default: false,
    },
    activeModel: {
      type: Object,
      default: () => {},
    },
    menuList: {
      type: Array,
      default: () => [],
    },
    handleClose: {
      type: Function,
      default: () => {},
    },
    updateModelAction: {
      type: Function,
      default: () => {},
    }
  },
  data() {
    return {
      loading: false,
      expandedKeys: ["0-0", "0-0-0", "0-0-0-0"],
      treeData: [],
      replaceFields: {
        title: "name",
      },
    };
  },
  computed: {
    visible: {
      get() {
        return this.modelVisible;
      },
      set(value) {
        return value;
      },
    },
  },
  methods: {
    addMenu(menu) {
      let menuC = JSON.parse(JSON.stringify(menu));
      menuC.key = "0-" + this.treeData.length;
      this.treeData.push(menuC);
    },
    async submit() {
      let parm = { ...this.activeModel };
      delete parm.menu_list;
      parm.list = this.treeData;
      this.updateModelAction(parm);
    },
    onDragEnter(info) {
      console.log(info);
      // expandedKeys 需要受控时设置
      // this.expandedKeys = info.expandedKeys
    },
    onDrop(info) {
      console.log(info);
      const dropKey = info.node.eventKey;
      const dragKey = info.dragNode.eventKey;
      const dropPos = info.node.pos.split("-");
      const dropPosition =
        info.dropPosition - Number(dropPos[dropPos.length - 1]);
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr);
          }
          if (item.children) {
            return loop(item.children, key, callback);
          }
        });
      };
      const data = [...this.treeData];

      // Find dragObject
      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj);
        });
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.unshift(dragObj);
        });
      } else {
        let ar;
        let i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      }
      this.treeData = data;
    },
    // diffTree(oldTree,tree){

    // }
    loopFormatKey(arr, parentKey = "0") {
      arr.forEach((item, index) => {
        item.key = parentKey + "-" + index;
        if (item.children) {
          this.loopFormatKey(item.children, item.key);
        }
      });
    },
  },
  mounted() {
    let arr = JSON.parse(JSON.stringify(this.activeModel.menu_list));
    this.loopFormatKey(arr);
    this.treeData = arr;
    console.log(this.treeData);
  },
};
</script>
<style lang="less" scoped>
.model-box {
  display: flex;
  width: 800px;
  .menu-list__content {
    width: 30%;
  }
  .model-tree {
    width: 70%;
  }
  .menu-item {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
  }
  .menu-item:hover {
    background-color: #e9eefa;
  }
}
</style>
